<template>
	<div class="job-search-wrapper">
		<div class="job-search-box">
			<div class="job-search-form">
				<div class="search-input-box">
					<div class="input-wrap">
						<el-input
							autocomplete="on"
							spellcheck="false"
							type="text"
							placeholder="搜索职位、公司"
							class="input"
							v-model="state.name"
						/>
					</div>
				</div>
				<a class="search-btn" @click="city(null, state.name)">搜索</a>
			</div>
		</div>

		<div class="w-1136px h-30px city-area-dropdown" style="margin-top: 15px">
			<ul class="city-area-tab">
				<li class="active">城市和区域</li>
			</ul>
			<div class="area-dropdown-item">
				<ul class="dropdown-city-list">
					<li
						v-for="item in state.searchTypeOneList"
						@click="city(item, null)"
						:class="{ selected: state.query.city === item }"
					>
						{{ item }}
					</li>
				</ul>
			</div>
			<!--			<div class="area-dropdown-item">-->
			<!--				<div class="area-select-wrapper">-->
			<!--					<div class="area-select-container">-->
			<!--						<ul class="dropdown-area-list">-->
			<!--							<li v-for="item in state.searchTypeTwoList">{{ item }}</li>-->
			<!--						</ul>-->
			<!--					</div>-->
			<!--				</div>-->
			<!--			</div>-->
		</div>
	</div>
</template>
<script setup lang="ts">
const state = reactive({
	searchTypeOneList: [],
	searchTypeTwoList: ['不限', '湖滨区'],
	searchTypeThreeList: ['全国', '北京'],
	query: {
		city: null,
		name: null,
	},
})

const emit = defineEmits(['cityQueryItem'])
/**
 * 初始化
 */
function init() {
	http.get('area/province').then((res) => {
		state.searchTypeOneList = res.data
	})
}

/**
 * 城市
 */
function city(city: string, name: string) {
	state.query.city = city
	state.query.name = name
	emit('cityQueryItem', state.query.city, state.query.name)
}
init()
</script>
<style scoped>
.condition-position-select {
	float: left;
	margin-top: 20px;
	margin-right: 20px;
}
.area-dropdown-item {
	margin-bottom: 30px;
	position: relative;
	.dropdown-city-list {
		margin: 18px 2px -10px;
	}
	ul {
		list-style: none;
		display: block;

		li {
			margin-right: 15px;
			display: inline;
			font-size: 16px;
			font-weight: 500;
			line-height: 28px;
			cursor: pointer;
			padding-bottom: 6px;
			transition: all 0.2s linear;
		}
	}

	li:hover {
		color: #0ca678;
		background-color: #e0e0e0;
	}
	li.selected {
		border-radius: 8px;
		background-color: #0ca678; /* Background color of selected item */
		color: white; /* Text color of selected item */
	}
}
.area-select-container {
	width: 1132px;
	height: 40px;

	.dropdown-area-list {
		width: 100%;
		height: 30px;
		background-color: #f6f6f6;
	}
}
.city-area-tab {
	margin-bottom: 8px;

	.active {
		position: relative;
		color: #00a6a7;
	}
}
.dropdown-city-list {
	list-style: none;
	margin: 18px 2px -10px;
}
.job-search-wrapper {
	color: #1e1e1e;
	background: #fff;
	height: 292px;
	width: 1184px;
	margin: 20px auto 0;
	border-radius: 12px;
	padding: 24px 24px 16px;
	margin-bottom: 15px;

	.job-search-box {
		margin: 0 auto;
	}

	.job-search-box .job-search-form {
		width: 780px;
		height: 54px;
		background: #00bebd;
		border-radius: 2px 12px 12px 2px;
		border: 2px solid #00bebd;
		padding: 0px 1px 1px 1px;

		.search-input-box {
			position: relative;
			float: left;
			background: #fff;
			width: 628px;
			margin-left: 1px;
		}

		.input-wrap {
			min-width: 300px;
			vertical-align: middle;
			line-height: normal;
		}
	}
}
.input {
	width: 100%;
	height: 50px;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
}
.search-btn {
	cursor: pointer;
	float: left;
	display: block;
	font-weight: 500;
	line-height: 28px;
	width: 116px;
	font-size: 20px;
	text-align: center;
	padding: 11px 0;
}
</style>
